<template>
  <div class="center-top-wrap">
    <e-candlestick
      :id="id()"
      :chartData="candlestickData"
      @q-datazoom="candlestickDatazoom"
      @q-finished="candlestickFinished"
      v-if="showCandl"
    />
    <e-line :id="id()" :chartData="qnyqfxChartData" v-if="showElineChart" />
    <Spin fix v-show="centerTopChartLoading">加载中...</Spin>
  </div>
</template>
<script>
import { nanoid } from 'nanoid'
import { createNamespacedHelpers } from 'vuex'
import { each, merge, last } from 'lodash'
import { candlestickOptions, eLineOptions } from './chartOptions'
const { mapState, mapActions } = createNamespacedHelpers('tablesDay')

export default {
  name: 'tables-day-center-top',
  components: {
    ELine: () => import('@/commons/charts/ELine'),
    ECandlestick: () => import('@/commons/charts/ECandlestick')
  },
  computed: {
    ...mapState(['centerTopCandList', 'centerTopChartLoading', 'defaultDate', 'selecteType', 'QNYQFXList']),
    id() {
      return nanoid
    },
    candlestickData() {
      if (!this.centerTopCandList || this.centerTopCandList.length === 0) {
        return null
      }
      const { xAixisList, values = {}, actualGas } = this.modifyCandlestickData(this.centerTopCandList)
      return merge({}, candlestickOptions, {
        xAxis: {
          data: xAixisList
        },
        series: [
          {
            data: values.data,
            markPoint: {
              data: values.markPointData
            }
          },
          {
            data: actualGas
          }
        ]
      })
    },
    showCandl() {
      return this.selecteType !== 'qnyqfx' && this.centerTopCandList.length > 0
    },
    showElineChart() {
      return this.selecteType === 'qnyqfx' && this.QNYQFXList.length > 0
    },
    qnyqfxChartData() {
      const _serList = []
      const _xAixisList = []
      each(this.QNYQFXList, (item, index) => {
        const { count, ...rest } = item
        _xAixisList.push(index)
        _serList.push({
          name: index,
          value: count,
          ...rest
        })
      })
      return merge({}, eLineOptions, {
        xAxis: {
          data: _xAixisList
        },
        series: [
          {
            type: 'line',
            data: _serList
          }
        ]
      })
    }
  },
  methods: {
    ...mapActions(['loadCenterTopCandData', 'changeCandlZoomRange']),
    modifyCandlestickData(rawData = []) {
      let xAixisList = []
      let values = []
      const actualGas = []
      const markPointData = []
      each(rawData, item => {
        const [first, one, two, three, four, five] = item
        xAixisList.push(first)
        let color0 = '#ec0000'
        let borderColor0 = '#8A0000'
        let color = '#00da3c'
        let borderColor = '#008F28'
        const lastItem = last(item)
        if (lastItem) {
          color0 = '#ff9900'
          borderColor0 = '#ff9900'
          color = '#ff9900'
          borderColor = '#ff9900'
          markPointData.push({
            name: first,
            value: two,
            coord: [first, two],
            itemStyle: {
              color: '#ff9900'
            }
          })
        }
        if (five < 0) {
          color0 = '#ed141e'
          borderColor0 = '#ed141e'
          color = '#ed141e'
          borderColor = '#ed141e'
        }
        values.push({
          name: first,
          value: [one, two, four, three],
          itemStyle: {
            color,
            borderColor,
            borderColor0,
            color0
          }
        })
        actualGas.push(five)
      })

      return {
        xAixisList,
        values: {
          data: values,
          markPointData
        },
        actualGas
      }
    },
    candlestickDatazoom(data = {}) {
      const { batch = [] } = data
      if (batch[0].start === 0 && batch[0].end === 100) {
        this.loadCenterTopCandData({
          tId: this.defaultDate
        })
      }
    },
    candlestickFinished(chart) {
      const { dataZoom = [] } = chart.getOption()
      const { start, end } = dataZoom[0]
      this.changeCandlZoomRange({
        start,
        end
      })
    }
  }
}
</script>
<style lang="less" scoped>
.center-top-wrap {
  width: 100%;
  height: 100%;
}
</style>
